<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Device Atlas Demonstration</title>
    </head>
    <body style="font-family: Arial, sans-serif; margin:0px;">
        <div style="width: 100%; background-color:#5BADD6; color: #fff; padding: 5px;">
            <span style="color: #fff; font-size: 2.5em; color: #323232">DeviceAtlas</span>
            Bloom Device Test Page
        </div>
        
        <div style="margin: 10px;">
            <strong>Detected UA string:</strong> {{ ua }}<br/>
            <strong>DeviceAtlas version:</strong> {{ apiRevision }}<br/>

            <p>
                {% if imgSrc %}
                    <img src="{{ imgSrc }}" alt="Device Image" />
                {% else %}
                    No image available
                {% endif %}
            </p>

            <p>
            <strong>Available Properties</strong>
            </p>
            <table style="font-size:0.9em;">
            {% for prop in request.device.items %}
                <tr style="background-color: #{% cycle fff,f8f8f8 %};">
                    <td>
                        <strong>{{ prop.0 }}</strong>
                    </td>
                    <td>
                        {% ifequal prop.1 t %} <span style="color: #0c0;"> {% endifequal %}
                        {% ifequal prop.1 f %} <span style="color: #c00;"> {% endifequal %}
                            {{ prop.1 }} 
                        </span>
                    </td>
                </tr>
            {% endfor %}
            </table>
            <div style="color: #ccc; border-top: thin solid #ccc;margin-top: 10px;">
                DA load time: {{loadTime}}s <br/>
                Device recognition time: {{recogTime}}s ({{recogPerSec}}/s)<br/>
                Server name: {{server_name}}
            </div>
        </div>
    </body>
</html>

